<template>
  <sideslip ref="sideslip" @bindevent="closeSideslip">
    <div>
      <tabs :data="['全部大学', '已选大学']" :value="tabsActive" @event="returnTabs"></tabs>
      <div>
        <div v-show="!tabsActive">
          <div class="p20-0">
            <screen @screenClick="bindScreen"></screen>
          </div>
          <select-sort @event="bindSelect" class="pb15"></select-sort>
        </div>
        <div class="content-major" v-if="list.length>0">
          <ul class="flex-row line" v-for="(item,index) in list" :key="index">
            <li>
              <block type="probability" :data="{id:item.chongShouBao.id,name:item.chongShouBao.name,probability:item.probability}"></block>
            </li>
            <li class="flex" style="width:0">
              <block type="major" :data="{name:item.collegeName,list:[item.yearOfStudy,item.grade],tuition:item.price}"></block>
            </li>
            <li>
              <block type="plan" :data="{year:item.year,plan:item.studentPlan,list:item.enrollMajorScoreLines}"></block>
            </li>
            <li class="pl20 pr5 flex-row--c">
              <div
                class="block-btn--add"
                :class="item.choose && 'active'"
                @click="add(item);item.choose=!item.choose">
                  {{item.choose?'已添加备选库':'添加至备选库'}}
                </div>
            </li>
          </ul>
          <paginate v-if="totalElements>15" :total="totalElements" :current-page="page" @pagechange="pagechange"></paginate>
        </div>
        <no-content v-else :text="text"></no-content>
      </div>
    </div>
  </sideslip>
</template>
<script type="text/javascript">
import { api } from '@/utils'
import _ from 'lodash'
import selectSort from '~/components/slot/select-sort'
const COMPONENTS = {
  selectSort
}
export default {
  components: COMPONENTS,
  data () {
    return {
      school: '',
      tabsActive: 0,
      list: '',
      totalElements: 0,
      page: 1,
      text: '加载中...',
      params: {
        majorId: '',
        sortRule: 0,
        page: 0,
        size: 15
      }
    }
  },
  methods: {
    closeSideslip () {
      this.$emit('closeSideslipEvent')
    },
    init (data) {
      this.school = data
      this.tabsActive = 0
      
      // 触发滑窗
      this.$refs.sideslip.$emit('event')

      this.params.majorId = data.majorId
      this.returnTabs(0)
    },
    returnTabs (msg) {
      this.tabsActive = msg
      if (msg === 0) {
        this.getData()
      } else {
        this.getDataSchool()
      }
    },
    bindScreen (data) {
      for (let index in data) {
        this.params[index] = data[index]
      }
      this.reset()
      this.getData()
    },
    bindSelect (value) {
      this.params.sortRule = value
      this.reset()
      this.getData()
    },
    getData () {
      console.log('全部大学数据')
      this.$axios.get(api.queryFirstMajorCollege, { params: this.params }).then(data => {
        if (!_.isEmpty(data)) {
          if (data.content.length > 0) {
            this.list = data.content
            this.totalElements = data.totalElements
          } else {
            this.text = '暂无数据'
            this.reset()
          }
        } else {
          this.text = '暂无数据'
          this.reset()
        }
      }).catch(err => {
        console.log(err)
        this.reset()
        this.text = '网络走丢了，请稍后重试！'
      })
    },
    // 添加或取消添加备选库
    add (item) {
      let params = {
        majorId: this.params.majorId,
        collegeId: item.collegeId,
        enrollStudentPlansId: item.id
      }
      if (this.tabsActive === 1) params.enrollStudentPlansId = item.enrollStudentPlansId
      this.$axios.post(api.setFirstMajorCollege, params).then(data => {
        console.log('添加/删除专业下的大学')
      }).catch(data => {
        // this.$toast('网络走丢了，请稍后重试！')
        this.getData()
      })
    },
    // 已选大学列表
    getDataSchool () {
      this.$axios.get(api.queryFirstChooseMajorCollege, { params: this.params }).then(data => {
        if (!_.isEmpty(data)) {
          if (data.content.length > 0) {
            this.list = data.content
            console.log('内容', this.list)
            this.totalPages = data.totalPages
            this.totalElements = data.totalElements
            // 加载状态结束
            this.loading = false
          } else {
            this.text = '暂无数据'
            this.reset()
          }
        } else {
          this.text = '暂无数据'
          this.reset()
        }
      }).catch(err => {
        console.log(err)
        this.reset()
        this.text = '网络走丢了，请稍后重试！'
      })
    },
    pagechange (index) {
      this.params.page = index - 1
      this.page = index
      this.getData()
    },
    reset () {
      this.params.page = 0
      this.list = []
      this.totalElements = 0
      this.page = 1
    }
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .block-major{
    padding-right:0px !important;
  }
  /deep/ .el-tabs__nav-scroll{
    padding:0 !important;
  }
  /deep/ .block-probability{
    padding-right:40px;
  }
</style>
